<template>
  <div class="flex-col page">
    <div class="flex-row section">
      <div class="flex-col justify-center flex-1">
        <!-- <div class="flex-row justify-start">
          <img class="image_2" style="margin: 0;margin-top: 3.31rem;margin-left: 10px;" src="https://ide.code.fun/api/image?token=6645cfdaa2432f00114f1e7c&name=8b7089ba2cd479688cc0c9c2dda31c12.png" />
        </div> -->
        <div class="flex-row" style="width:355px;margin: 0 auto;margin-top: 4.25rem;">
          <span class="font text">图文化</span>
          <span class="font text_2">金库</span>
        </div>

        <div class="flex-col items-start section_4" ref="myDiv">
          <span class="text_3">当前账户</span>
          <div class="mt-14 flex-col items-start">
            <span class="text_4">{{ currentData }}</span>
            <div class="mt-11-5">
              <div class="font_2">
                开启暴富计划，享多多收益
                <br />
              </div>
              <!-- <span class="font_2">收益</span> -->
            </div>
          </div>
        </div>
        <div class="flex-col line-tabs">
          <div class="flex-col section_5">
            <div class="flex-row justify-around self-stretch group_2">
              <span class="font_3 text_5" @click="changeTabs(index)" :class="currentTabs == index ? 'active' : 'text_6'" v-for="(item, index) in tabsList" :key="index">{{ item }}</span>
            </div>
          </div>
          <div class="flex-col section_7 mt-5-5">
            <div class="flex-row justify-between equal-division group_3">
              <div class="flex-row">
                <span class="font_4 text_7">总人数</span>
                <span class="font_5 ml-4-5">{{ totalNum }}</span>
              </div>
              <div class="flex-row">
                <span class="font_4 text_8">总业绩</span>
                <span class="ml-6 font_5">{{ totalYj }}</span>
              </div>
            </div>
            <div class="flex-col self-stretch mt-14-5">
              <div class="flex-row items-center mt-20 list-item" v-for="(item, index) in userList" :key="index">
                <div class="flex-row items-center" style="width: 100%;">
                  <img class="image_6" style="margin: 0;" :src="item.avatar" />
                  <div class="flex-col items-start ml-11" style="width: 80%;">
                    <span class="font_6">{{ item.nickname }}</span>
                    <span class="font_7 text_9 mt-11-5" style="width: 100%;text-align: right;">+{{ item.yeji }}</span>
                    <span class="font_8 mt-11-5">{{ item.createtime }}</span>
                  </div>
                </div>
                <!-- <span class="font_7 text_9">+{{ item.yeji }}</span> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <U_foot></U_foot>
  </div>
</template>
<script>
import treasuryController from "./treasuryController";
export default treasuryController;

</script>


<style>
@import "../common/common.css";
.mt-18-5 {
  margin-top: 1.16rem;
}
.mt-5-5 {
  margin-top: 0.34rem;
}
.ml-4-5 {
  margin-left: 0.28rem;
}
.mt-14-5 {
  margin-top: 0.91rem;
}
.ml-11 {
  margin-left: 0.69rem;
}
.mt-11-5 {
  margin-top: 0.72rem;
}
.page {
  background-color: #f4f5f7;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background-image: linear-gradient(0deg, #f4f5f7 0%, #ffddcf 100%);
  background-size: 100% 22.28rem;
  background-repeat: no-repeat;
}
.section {
  /* padding-left: 0.63rem; */
  padding-bottom: 3.44rem;
  /* background-image: linear-gradient(0deg, #f4f5f7 0%, #ffddcf 100%);
  background-size: 100% 22.28rem; */
  /* background-repeat: no-repeat; */
}
.image_2 {
  margin-top: 3.31rem;
  width: 0.63rem;
  height: 1.09rem;
}
.section_2 {
  margin-left: 1.44rem;
  padding: 1.03rem 0 12rem;
  /* background-image: url("https://ide.code.fun/api/image?token=6645cfdaa2432f00114f1e7c&name=bafa0e56344f3538dad1bc0e5a58683d.png"); */
  background-size: 20.75rem 22.09rem;
  background-repeat: no-repeat;
}
.image {
  margin-left: -0.81rem;
  width: 20.47rem;
  height: 0.75rem;
}
.group {
  padding: 0 0.66rem;
}
.section_3 {
  padding: 0.44rem 0.84rem;
  background-color: #ffffffa6;
  border-radius: 1rem;
  width: 5.47rem;
}
.image_3 {
  width: 1.94rem;
  height: 1.19rem;
}
.image_4 {
  width: 1.09rem;
  height: 1.09rem;
}
.font {
  font-size: 2.13rem;
  font-family: HarmonyOS Sans SC;
  line-height: 2.03rem;
  font-weight: 900;
}
.text_2 {
  /* margin-left: 4.59rem; */
  color: #fd4a29;
}
.text {
  color: #333333;
}
.pos {
  position: absolute;
  /* left: 0.13rem; */
  left: 50%;
  width: 355px;
  top: 4.25rem;
  transform: translateX(-50%);
}
.section_4 {
  width: 355px;
  padding: 3.6rem 1.34rem 1.75rem 1.34rem;
  background-image: url("https://shops.cg500.com/static/twh_jk_bg@2x.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0 auto;
  margin-top: -24px;
}
.pos_3 {
  position: absolute;
  left: 50%;
  right: 1.25rem;
  /* top: 8.44rem; */
  top: 5.04rem;
  /* margin: 0 auto; */
  transform: translatex(-50%);
}
.text_3 {
  color: #ffd5c5;
  font-size: 0.81rem;
  font-family: PingFang SC;
  line-height: 0.78rem;
}
.text_4 {
  color: #ffffff;
  font-size: 2.25rem;
  font-family: PingFang SC;
  font-weight: 700;
  line-height: 2.25rem;
  word-break: break-all;
}
.font_2 {
  font-size: 0.88rem;
  font-family: PingFang SC;
  line-height: 1.25rem;
  color: #ffd5c5;
  width: 149px;
  text-align: left;
}
.image_5 {
  width: 3.75rem;
  height: 4.25rem;
}
.pos_2 {
  position: absolute;
  right: 4.19rem;
  top: 5.94rem;
}
.line-tabs {
  /* margin-top: -3.44rem; */
  /* padding-left: 1.25rem; */
  /* margin-top: 104px; */
  padding-bottom: 1.25rem;
}
.section_5 {
  /* margin-left: 1.44rem; */
  padding: 0 2.5rem 0.16rem;
  background-size: 20.75rem 22.09rem;
  background-repeat: no-repeat;
  /* background-image: url("https://ide.code.fun/api/image?token=6645cfdaa2432f00114f1e7c&name=bafa0e56344f3538dad1bc0e5a58683d.png"); */
  background-position: 0rem -19.25rem;
}
.group_2 {
  padding: 1.03rem 0 0.41rem;
}
.font_3 {
  font-size: 1.13rem;
  font-family: PingFang SC;
  line-height: 1.06rem;
}
.font_3.active {
  color: #000000;
  position: relative;
}
.font_3.active::after {
  position: absolute;
  content: "";
  background-color: #fd4a29;
  width: 1.31rem;
  height: 0.19rem;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
}
/* .text_5 {
  color: #000000;
} */
.text_6 {
  /* margin-right: 2.56rem; */
  color: #777777;
}
.section_6 {
  margin-left: 1.56rem;
  background-color: #fd4a29;
  width: 1.31rem;
  height: 0.19rem;
}
.section_7 {
  /* margin-right: 1.25rem; */
  padding: 1.09rem 1rem 2.41rem;
  background-color: #ffffff;
  border-radius: 0.75rem;
  width: 355px;
  margin: 0 auto;
  margin-top: 10px;
}
.equal-division {
  align-self: flex-end;
  margin-right: 1.22rem;
}
.group_3 {
  width: 15.22rem;
}
.font_4 {
  font-size: 0.75rem;
  font-family: PingFang SC;
  line-height: 0.69rem;
  color: #999999;
}
.text_7 {
  line-height: 0.72rem;
}
.text_8 {
  line-height: 0.72rem;
}
.font_5 {
  font-size: 0.75rem;
  font-family: PingFang SC;
  line-height: 0.59rem;
  color: #151515;
}
.list-item:first-child {
  margin-top: 0;
}
.image_6 {
  width: 3.38rem;
  height: 3.38rem;
  border-radius: 50%;
}
.font_6 {
  font-size: 0.88rem;
  font-family: PingFang SC;
  line-height: 0.81rem;
  font-weight: 500;
  color: #151515;
}
.font_8 {
  font-size: 0.88rem;
  font-family: PingFang SC;
  line-height: 0.69rem;
  color: #999999;
}
.font_7 {
  font-size: 1.13rem;
  font-family: PingFang SC;
  line-height: 0.88rem;
  font-weight: 700;
  color: #e73328;
}
.text_9 {
  margin-right: 0.5rem;
}
</style>
